import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Button, Row, Col,
    Form, Checkbox, Switch, Tabs,
    Select, DatePicker, Input, Radio,
    InputNumber, Table, Typography
} from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;
class ViewPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: []
        }
    }
    formRef = React.createRef();
    onFinish = (values) => {
        console.log(values)
    }
    render() {
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const columns = [
            {
                title: '项目',
                dataIndex: 'PackLine',
                key: 'PackLine',
            },
            {
                title: '收货类型',
                dataIndex: 'TranType',
                key: 'TranType',
            },
            {
                title: '收货数量',
                dataIndex: 'ReveiveQty',
                key: 'ReveiveQty',
            },
            {
                title: '已收货',
                dataIndex: 'Received',
                key: 'Received',
            },
            {
                title: '采购单',
                dataIndex: 'PONum',
                key: 'PONum',
            },
            {
                title: '项目',
                dataIndex: 'POLine',
                key: 'POLine',
            },
            {
                title: '收货行',
                dataIndex: 'PORelNum',
                key: 'PORelNum',
            },
            {
                title: '批号',
                dataIndex: 'LotNum',
                key: 'LotNum',
            },

        ];
        return (
            <PageHeaderWrapper>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <p>
                        <Button type="primary" icon={<PlusOutlined />}>新增</Button>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 5 }}>保存</Button>
                        <Button type="link" icon={<PrinterOutlined />}>打印预览</Button>
                    </p>
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="汇总" key="1">
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item label="采购单号" style={{ marginBottom: 0 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['RcvHeader', 'PONum']}
                                                            rules={[{ required: true, message: "采购单号必填" }]}>
                                                            <Input disabled={true} />
                                                        </Form.Item>
                                                        <Form.Item>
                                                            <Button type="primary">采购单...</Button>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="供应商" name={['RcvHeader', 'VendorID']}>
                                                    <Input style={{ width: 255 }} />
                                                </Form.Item>
                                                <Form.Item
                                                    name={['RcvHeader', 'ShipViaCode']}
                                                    label="运输方式">
                                                    <Select style={{ width: 255 }} placeholder="运输方式"> </Select>
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item
                                                    name={['RcvHeader', 'Received']}
                                                    wrapperCol={{ offset: 5 }}
                                                    valuePropName="checked">
                                                    <Checkbox>全部收货</Checkbox>
                                                </Form.Item>
                                                <Form.Item label="收货单号" style={{ marginBottom: 0 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['RcvHeader', 'PackSlip']}
                                                            rules={[{ required: true, message: "收货单号必填" }]}>
                                                            <Input disabled={true} />
                                                        </Form.Item>
                                                        <Form.Item>
                                                            <Button type="primary">收货单...</Button>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['RcvHeader', 'ArrivedDate']}
                                                    label="到货日期">
                                                    <Input style={{ width: 144 }} disabled={true} />
                                                </Form.Item>
                                                <Form.Item
                                                    name={['RcvHeader', 'ReceiptDate']}
                                                    label="收货日期"
                                                    rules={[{ required: true, message: "收货日期必填" }]}>
                                                    <DatePicker />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </TabPane>
                                    <TabPane tab="收货行" key="2">
                                        <Row gutter={[16, 16]}>
                                            <Col span={12}>
                                                <Form.Item label="采购单" style={{ marginBottom: 0 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['RcvDetail', 'PONum']}
                                                            rules={[{ required: true, message: "采购单" }]}>
                                                            <Input style={{ width: 160 }} placeholder="采购单" />
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['RcvDetail', 'POLine']}
                                                            rules={[{ required: true, message: "分录" }]}>
                                                            <Input style={{ width: 68 }} placeholder="分录" />
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['RcvDetail', 'PORelNum']}
                                                            rules={[{ required: true, message: "收货行" }]}>
                                                            <Input style={{ width: 68 }} placeholder="收货行" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item
                                                    label="物料编码"
                                                    name={['RcvDetail', 'PartNum']} >
                                                    <Input disabled={true} />
                                                </Form.Item>
                                                <Form.Item
                                                    label="描述"
                                                    name={['RcvDetail', 'PartDescription']} >
                                                    <Input disabled={true} />
                                                </Form.Item>
                                                <Form.Item label="收货数量">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['RcvDetail', 'RcvQty']}>
                                                            <InputNumber min={0} />
                                                        </Form.Item>
                                                        <Form.Item
                                                            noStyle
                                                            name={['RcvDetail', 'IUM']}>
                                                            <Input style={{ width: 60 }} placeholder="单位" disabled />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item
                                                    label="批次"
                                                    name={['RcvDetail', 'LotNum']} >
                                                    <Input style={{ width: 200 }} disabled={true} />
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['RcvDetail', 'Received']}
                                                            valuePropName="checked">
                                                            <Checkbox>已收货</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['RcvDetail', 'ReceivedComplete']}
                                                            valuePropName="checked">
                                                            <Checkbox>完成收货</Checkbox>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item
                                                    label="订单"
                                                    name={['RcvDetail', 'OrderQty']} >
                                                    <Input style={{ width: 100 }} disabled={true} />
                                                </Form.Item>
                                                <Form.Item
                                                    label="收货"
                                                    name={['RcvDetail', 'ReceivedQty']} >
                                                    <Input style={{ width: 100 }} disabled={true} />
                                                </Form.Item>
                                                <Form.Item
                                                    label="剩余"
                                                    name={['RcvDetail', 'VenRemQty']} >
                                                    <Input style={{ width: 100 }} disabled={true} />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card>
                                <Table size="small" columns={columns} dataSource={this.state.dataSource} />
                                <Button block type="dashed" icon={<PlusOutlined />}>添加收货行</Button>
                            </Card>
                        </Col>
                    </Row>
                </Form>
            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;